<template>
    <div>
        <div class="title flex al juct">好老师 在语桥</div>

        <div class="teacher">
            <ul class="flex jusb warp">
                <li :style="{'margin-right':index==0?'278px':'0'}" v-for="(item,index) in teacher" :key="index">
                    <img :src="item.img" alt="">
                    <dd>
                        <h4>
                            <i></i>
                            <font>{{item.name}}</font>
                            <span>{{item.fangxiang}}</span>
                        </h4>
                        <p>{{item.desc}}</p>
                        <a href="">抢占名师</a>
                    </dd>
                </li>
                <li @mouseover="index = 1" @mouseleave="index = -1" class="teacher-bottom">
                    <img src="http://file2.gedu.org/nanjing_pc/upload/images/2019/7/8154045479.jpg" alt="">
                    <div :style="{top:index === 1?'0':'152px'}"></div>
                    <dd class="yiny" :style="{top:index === 1?'0':'152px'}">
                        <h4>
                            <i></i>
                            <font>刘亚平</font>
                            <span>雅思听力</span>
                        </h4>

                        <p style="color: #fff;">
                            我可以激情，可以抒情，可以热情，可以暖情。我可以调动你的积极性，激发你的创造性，开拓你的视野性。我的听力8.5，我的教学经验丰富。来我的听力课...
                        </p>
                        <i class="qzms">抢占名师</i>
                    </dd>

                </li>
                <li @mouseover="index = 2" @mouseleave="index = -1" class="teacher-bottom" style="margin-right: 276px;">
                    <img src="http://file2.gedu.org/nanjing_pc/upload/images/2019/7/8154146161.jpg" alt="">
                    <div :style="{top:index === 2?'0':'152px'}"></div>
                    <dd class="yiny" :style="{top:index === 2?'0':'152px'}" style="background: none;">
                        <h4>
                            <i></i>
                            <font>宋金杰</font>
                            <span>托福口语</span>
                        </h4>

                        <p style="color: #fff;">
                            寓教于乐，善于用自己的经历带学生看托福口语；课堂气氛拿捏恰到好处，既能让学生学到知识，也能给他们带去欢声笑语。发音纯正，课堂上学生能够接触到...
                        </p>
                        <i class="qzms">抢占名师</i>
                    </dd>
                </li>
                <li @mouseover="index = 3" @mouseleave="index = -1" class="teacher-bottom">
                    <img src="http://file2.gedu.org/nanjing_pc/upload/images/2019/7/8154217813.jpg" alt="">
                    <div :style="{top:index === 3?'0':'152px'}"></div>
                    <dd class="yiny" :style="{top:index === 3?'0':'152px'}" style="background: none;">
                        <h4>
                            <i></i>
                            <font>宫雅洁</font>
                            <span>雅思写作</span>
                        </h4>

                        <p style="color: #fff;">
                            温和又耐心；认真又细致；幽默又融洽。有语法，有章法，更有写作的独特方法。来课堂，可以让你写作更快捷，只因我是你的写作老师宫雅洁。
                        </p>
                        <i class="qzms">抢占名师</i>
                    </dd>
                </li>

            </ul>
            <div class="in_t_or1">
                <h3>层层优选师资</h3>
                <p>严格筛选 多轮面试<br>千锤百炼 定期培训</p>
                <a href="">查看更多名师>></a>
            </div>
            <div class="in_t_or2">
                <p>定期抽检 精益求精<br>岗前试讲 百里挑一<br>模拟讲课 能者为师</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "teacher",
        data(){
            return{
                index:-1,
                teacher:[]
            }
        },
        created() {
            this.$axios.get('sys/jslist')
                .then(res=>{
                        this.teacher = res.data.slice(0,3);
                        /* eslint-disable */

                        console.log(res);

                        /* eslint-enable */

                    }
                )
        }
    }
</script>

<style scoped>

</style>